<template>
    <div class="mine">
      <header>
        <div class="userinfo">
            <div class="username">寝室长：张三</div>
            <div class="phone">手机号：13203587562</div>
            <div class="h-id">寝室号：1001</div>
             <div class="instructor">辅导员：薛文诚</div>
             <div class="phone-2">手机号：13203587562</div>
        </div>
      </header>
      <main>
           <div class="box">
               <input type="text" placeholder="请填写学号" />
           </div>
           <div class="sex-box">
           <div class="sex">
                <div class="public" @click="isSelected('1')" :class="[sexIndex==1?'active':'']">男</div>
                <div class="public" @click="isSelected('0')" :class="[sexIndex==0?'active':'']">女</div>
            </div>
           </div>
            <div class="college">
            <select name="学院" id="college">
               <option value="计算机学院">计算机学院</option>
               <option value="艺术学院">艺术学院</option>
               <option value="管理学院">管理学院</option>
           </select>
           </div>
            <div class="department">
            <select name="系别" id="department">
               <option value="计算机系">计算机系</option>
               <option value="艺术系">艺术系</option>
               <option value="土木工程系">土木工程系</option>
           </select>

           </div>
            <div class="specialty">
            <select name="专业" id="specialty">
               <option value="计算机技术与科学">计算机技术与科学</option>
               <option value="数字多媒体">数字多媒体</option>
               <option value="移动互联">移动互联</option>
           </select>
     
           </div>
         <div class="class-grade">
            <select name="班级" id="class-grade">
               <option value="18计算机科学与技术班">18计算机科学与技术班</option>
               <option value="18计算机应用技术班">18计算机应用技术班</option>
               <option value="18法律班">18法律班</option>
           </select>

           </div>
      </main>
           <div class="button">保存</div>
    </div>
</template>
<script>
import base from '../assets/js/base.js'
export default {
  name: "Mine",
  data() {
    return {
        sexIndex: "1"
    };
  },
  methods: {
    isSelected(val) {
      this.sexIndex = val;
    }
  },
  created() {
  
  },
  mounted() {
    base.changeTabbar('#mine')
  }
};
</script>
<style lang="scss" scoped>
@import "../assets/scss/base.scss";
html,
body,
#app,
.mine {
  height: 100%;
}
header {
  color: #fff;
  font-size: ptr(16px);
  display: flex;
  justify-content: space-between;
  background-color: #72cbd1;
  .userinfo {
    width: 100%;
    padding: ptr(28px) ptr(30px) ptr(20px) ptr(30px);
    box-sizing: border-box;
    div {
      margin-bottom: ptr(8px);
    }
    .h-id {
      padding-bottom: ptr(8px);
      border-bottom: ptr(1px) solid #fff;
    }
  }
}
main {
  padding: ptr(10px) ptr(20px) 0;
  box-sizing: border-box;
  .box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: ptr(10px);
    input[type="text"] {
      padding: 0 ptr(5px);
      vertical-align: top;
      width: 100%;
      height: ptr(30px);
      outline: none;
      border-radius: ptr(5px);
      border: ptr(1px) solid #999;
    }
  }
  .sex-box {
    margin-bottom: ptr(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .sex {
      display: flex;
      justify-content: space-between;
      width: 100%;
      background-color: #fff;
      font-size: ptr(14px);
      .public {
        width: 50%;
        height: ptr(30px);
        line-height: ptr(30px);
        text-align: center;
        border: 1px solid #999;
      }
      .active {
        background-color: #41c7db;
      }
      div:first-child {
        border-right: none;
        border-radius: ptr(5px) 0 0 ptr(5px);
      }
      div:last-child {
        border-radius: 0 ptr(5px) ptr(5px) 0;
      }
    }
  }
  .dormitory,
  .college,
  .department,
  .specialty,
  .class-grade {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: ptr(34px);
    margin-bottom: ptr(10px);
    #dormitory,
    #college,
    #department,
    #specialty,
    #class-grade {
      vertical-align: top;
      height: ptr(34px);
      outline: none;
      width: 100%;
      background-color: #fff;
      border-radius: ptr(5px);
    }
  }
}
.button {
  margin: ptr(20px) ptr(20px) 0;
  box-sizing: border-box;
  font-size: ptr(14px);
  border-radius: ptr(10px);
  color: #fff;
  height: ptr(40px);
  text-align: center;
  line-height: ptr(40px);
  background-color: #0cb0b5;
}
</style>

